/*
 * @Descripttion:
 * @version:
 * @Author: ChenXiang
 * @Date: 2021-05-28 17:30:31
 * @LastEditors: ChenXiang
 * @LastEditTime: 2021-06-02 20:02:50
 */

import React, { useState } from "react";
import useWhyDidYouUpdate from "@/common/hooks/useWhyDidYouUpdate";
const Counter = React.memo((props: any) => {
  useWhyDidYouUpdate("Counter", props);
  return <div style={props.style}>{props.count}</div>;
});
export default function App() {
  const [count, setCount] = useState(0);
  const [userId, setUserId] = useState(0);
  const counterStyle = {
    fontSize: "3rem",
    color: "red",
  };
  return (
    <div>
      <div className="counter">
        <Counter count={count} style={counterStyle} />
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
      <div className="user">
        userId:{userId}
        <button onClick={() => setUserId(userId + 1)}>Switch User</button>
      </div>
    </div>
  );
}
